<!--
 * @Description: 
 * @Autor: 田力源
 * @Date: 2023-02-18 09:17:54
 * @LastEditors: 田力源
 * @LastEditTime: 2023-02-20 10:20:04
-->
<template>
    <div class="header">
        <div class="logo" @click="toIndex" title="回到主页">
            <div class="logo-img"></div>
            <div class="logo-text">宝可梦玩家社区</div>
        </div>
        <!-- <div class="search">
            <i class="iconfont icon-search"></i>
            <input type="text" v-model="search" class="seach-content">
        </div> -->
        <div class="actions">
            <div class="login" v-if="user.isLogin">
                <span class="text">欢迎回来，{{ user.userInfo.nickname }}</span>
                <el-dropdown>
                    <img class="image" :src="`/src/assets/images/user/${user.userInfo.image}.webp`">
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item :icon="User"><router-link to="/user"
                                    style="text-decoration: none;">个人中心</router-link></el-dropdown-item>
                            <el-dropdown-item :icon="SwitchButton" @click="quit">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="nologin" v-else>
                <router-link to="/login">登录</router-link>
                <el-divider direction="vertical" />
                <router-link to="/sign">注册</router-link>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

import { User, SwitchButton } from '@element-plus/icons-vue'

import router from '@/router';
import { useUserStore } from '@/store/index';

const search = ref('');
const user = useUserStore();
const toIndex = () => {
    router.push(`/welcome`)
}

// 退出登录
const quit = () => {
    window.localStorage.removeItem('userinfo');
    user.setUserInfo({});
    user.changeLogin(false);
}
</script>

<style scoped lang="scss">
.header {
    width: 100%;
    height: 70px;
    top: 0px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logo {
        width: 320px;
        height: 50px;
        display: flex;
        align-items: center;
        padding-left: 20px;
        cursor: pointer;

        .logo-img {
            width: 125px;
            height: 46px;
            background-image: url('@/assets/images/header/pokemon.png');
            background-size: 100% 100%;
        }

        .logo-text {
            margin-left: 20px;
            font-size: 25px;
            font-weight: bold;
            color: #333;
        }
    }

    .search {
        position: relative;

        .icon-search {
            color: #ccc;
            font-size: 25px;
            position: absolute;
            left: 15px;
            top: 10px;
        }

        .seach-content {
            width: 500px;
            height: 40px;
            border-radius: 20px;
            border: none;
            box-shadow: 0 0 3px rgb(0, 0, 0, 0.3);
            padding-left: 50px;
            font-size: 20px;
            color: #333;
            outline: none;
            transition: box-shadow .3s;

            &:focus {
                border: none;
                box-shadow: 0 0 3px rgb(0, 0, 0, 0.7);
            }
        }
    }

    .actions {
        width: 340px;
        height: 50px;
        display: flex;
        align-items: center;

        .login {
            display: flex;
            align-items: center;

            .text {
                cursor: default;
            }

            .image {
                margin-left: 20px;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                border: 1px solid #ccc;
                cursor: pointer;
            }
        }

        .nologin {
            a {
                font-size: 14px;
                text-decoration: none;
            }
        }
    }
}
</style>